<template>
  <div>
    <template>
      <section style="margin: 5% 30% 0px 30%">
        <b-field>
          <b-upload v-model="dropFiles" multiple drag-drop>
            <section class="section">
              <div class="content has-text-centered">
                <p>
                  <b-icon icon="upload" size="is-large"> </b-icon>
                </p>
                <p>Drop your files here , only one pls</p>
              </div>
            </section>
          </b-upload>
        </b-field>

        <div class="tags">
          <span
            v-for="(file, index) in dropFiles"
            :key="index"
            class="tag is-primary"
          >
            {{ file.name }}
            <button
              class="delete is-small"
              type="button"
              @click="deleteDropFile(index)"
            ></button>
          </span>
        </div>
      </section>
    </template>
    <b-button @click="upload()" style="margin-right:50px">click here</b-button>
    <b-button @click="dropFiles =[]">reset</b-button>
    <div style="margin-top:50px">
      <img
        :src="'data:image/png;base64,' + images"
        alt=""
        style="width: 25%"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "Change",
  data() {
    return {
      dropFiles: [],
      images:"",
    };
  },
  methods: {
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      var dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
    },
    deleteDropFile(index) {
      this.dropFiles.splice(index, 1);
    },
    upload() {
      let that = this;
      var reader = new FileReader();
      reader.readAsDataURL(this.dropFiles[0]);
      reader.onload = async function (e) {
        // txshow.src = this.result;
        let img = this.result.substring(this.result.indexOf(",") + 1);
        let res = await that.$http.post("/api/getProjection", {
          raw: img,
          steps: 50,
          seed: 3,
        });
        that.images=res.data.image;
        console.log(res);
      };
    },
  },
};
</script>
<style scoped>
</style>
